<template>
    <div style="min-width:809px">
        <div class="vs-table-box">
            <div class="operation-box clear-float">
                <div class="title-left"> 
                    类别列表
                </div>
                <el-button style="margin-left:auto;" @click="add" type="primary">新增</el-button>
            </div>
            <el-table :data="tableData" :header-cell-style="{background:'#f5f6f8'}"  v-loading="loading" header-row-class-name="has-gutter-table" style="width: 100%">
                <!-- <el-table-column width="60px" type="selection" ></el-table-column> -->
                <!-- <el-table-column prop="store" label="门店" min-width="70"> </el-table-column> -->
                <el-table-column prop="title" label="类别名称" min-width="70"> </el-table-column>
                <el-table-column  fixed="right" width="109" label="操作"> 
                    <template slot-scope="scope">
                        <span class="tab-table-text" @click="setRow(1,scope.row)">编辑</span>
                        <span class="tab-table-text red" @click="setRow(2,scope.row)">删除</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
        :title="`${ruleForm.id?'修改':'新增'}类别`"
        :visible.sync="dialogVisible"
        width="700px"
        :before-close="handleClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm" >
            <el-form-item label="类别名称：" prop="title" class="ruleFormInput">
                <el-input  type="text" v-model="ruleForm.title"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false;handleClose()">取 消</el-button>
            <el-button type="primary" :loading="isBtn" @click="setAd">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import VsUploading from '../../components/VsUploading'
export default {
    components:{
        VsUploading
    },
    data() {
        return {
            isActive:true,
            paging:{
                page:1,
                total:0,
                limit:10,
            },
            ruleForm: {
                title: '',
            },
            shopList:[],
            rules:{
                title:{ required: true, message: '请输入类别名称', trigger: 'blur' },
            },
            dialogVisible:false,
            isBtn:false,
            loading:false,
            tableData: []
        };
    },
    created() {
        this.handleCurrentChange(1);
    },
    methods: {
        add(){
            this.dialogVisible = true;
        },
        reset(){//重置
            this.paging = this.$options.data().paging;
            // this.paging.store_id = this.shopList[0].id;
            this.handleCurrentChange(1)
        },
        setRow(type,row){
            if(type==1){
                this.dialogVisible = true;
                this.ruleForm = JSON.parse(JSON.stringify(row))
            }else{
                this.$msgbox({
                    title: '提示',
                    message: '确定要删除该banner吗?',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose:async (action, instance, done) => {
                        if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        let {code,data} = await this.$Http.menuDelMenu({id:row.id})
                            if(code){
                                this.$message.success('删除成功!');
                                this.handleCurrentChange(1)
                            }
                            done();
                            instance.confirmButtonLoading = false;
                        } else {
                            done();
                        }
                    }
                }).then(action => {

                }).catch(()=>{});
            }
        },
        setAd(){
            this.$refs['ruleForm'].validate(async valid => {
                if(!valid)return;
                this.isBtn = true;
                let obj = Object.assign({},this.ruleForm);
                // obj.url = obj.url.join(',')
                let {code,data} = await this.$Http.menuSetMenu(obj);
                this.isBtn = false;
                if(code){
                    this.$message.success((this.ruleForm.id?'修改':'添加')+"成功!");
                    this.dialogVisible = false;
                    this.handleClose()
                    this.handleCurrentChange(1)

                    this.getUserMenu()
                    
                }
            })
        },
        async getUserMenu(){
            let res = await this.$Http.getUserMenu()
            if(res.code){
                let arr = res.data.menu.find(v=>v.name=='admin');
                if(arr){
                    localStorage.setItem("menu", JSON.stringify(arr.child));
                    location.reload();
                }
            }
        },
        handleClose(dom){
            dom&&dom();
            this.ruleForm = this.$options.data().ruleForm;
            this.$refs['ruleForm'].resetFields();
        },
        async getDataList(){
            this.loading = true;
            let {code,data} = await this.$Http.menuGetMenu(this.paging)
            this.loading = false;
            if(code){
                this.tableData = data.data;
            }
        },
        handleSizeChange(val){
             this.paging.limit = val;
            this.getDataList()
        },
        handleCurrentChange(val){
            this.paging.page = val;
            this.getDataList()
        },
    },
};
</script>

<style lang="scss" scoped>
.image-thumbnail{
    max-width: 200px;
    max-height: 140px;
}
video{
    max-width: 300px;
    max-height: 180px;
    width: 100%;
    object-fit: cover;
}
.red{
    color: #f00;
}
.ruleFormInput{
    ::v-deep{
        .el-input{
            // width: 300px;
        }
    }
}
</style>